import React, { useEffect } from 'react'
import Router from './router/router'
import './App.css'
import { WDStart } from './components'
import { useAppSelector } from './app/hooks'
import { useLocation, useNavigate } from 'react-router-dom'

const App: React.FC = () => {
  return <div>
    <Router></Router>
    <WDStart></WDStart>
  </div>
}

const withLogin = (Comp) => {
  return () => {
    const whiteList = ['/login', '/home']
    const isLogin = useAppSelector(state => state.user.isLogin);
    const { pathname }= useLocation()
    const navigate = useNavigate()

    
    useEffect(() => {
      if(!isLogin && !whiteList.includes(pathname) ) {
        navigate('/login')
      }
    }, [isLogin, pathname])


    return <Comp></Comp>
  }
}

export default withLogin(App)